<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easyUpload.js</title>
    <link rel="stylesheet" href="css/easy-upload.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bs_switch.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/Vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/easyUpload.js"></script>
    <style>
        img[src=""],
        img:not([src]) {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div>
        <input id="back" class="btn btn-info" type="button" onclick="javascript:history.back(-1)" value="返回上一页" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 ">

                <div class="form-group">

                    <div><strong>课程分类:</strong>&nbsp;
                        <select id="course">
                            <label><option name="course" value="0">请选择</option></label>
                        </select>
                    </div>
                </div>

                <div class="form-group">

                    <div><strong>格式:</strong>&nbsp;
                        <label><input name="format" type="radio" value="" />图文 </label>
                        <label><input name="format" type="radio" value="" />视频 </label>
                        <label><input name="format" type="radio" value="" />音频 </label>
                        <label><input name="format" type="radio" value="" />文件 </label>
                    </div>
                </div>
                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>封面图片:</strong></label>
                    <input class="btn btn-success " type="submit" id="fclick" value="上传图片" />
                    <input class="btn btn-warning " type="reset" value="删除图片" /><br>
                    <input type="file" onchange="change(this)" id="bookImg" name="bookImg"> <br />
                    <img id="upLoadImg" style="height:80px; width: 80px;" />
                </div>

                <!-- 多文件上传 -->
                <label class="col-md-2 control-label"><strong>课件内容:</strong></label>
                <div id="easyContainer">
                </div>

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件时长(分):</strong></label>
                    <div class="col-md-4">
                        <input class="form-control" id="time" type="text" v-model="time" value="" />
                    </div>
                </div>

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件简介:</strong></label>
                    <div class="col-md-6">
                        <textarea class="form-control" id="description" rows="5">
                        </textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div><strong>可查阅人员:</strong>&nbsp;
                        <label><input name="isOpen" type="radio" value="1" />全部 </label>
                        <label><input name="isOpen" type="radio" value="0" />部分指定 </label>
                    </div>
                </div><br>

                <div class="form-group device-switch switch">
                    <div><strong>可下载人员:</strong>&nbsp;
                        <label><input name="isDownload" type="checkbox" class="bs_switch" value="1" data-on="启用" data-off="开启" ></label>
                    </div>
                </div>
                <input class="btn btn-success " type="submit" onclick="submit()" value="立即提交" />&nbsp;&nbsp;&nbsp;
                <input class="btn btn-default " type="button" value="重置" />
                </form>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        var cover; //头像名称
        var filename = new Array;
        $('#easyContainer').easyUpload({
            allowFileTypes: '*.jpg;*.doc;*.pdf;*.docx;*.mp4', //允许上传文件类型，格式';*.doc;*.pdf'
            allowFileSize: 10000000, //允许上传文件大小(KB)
            selectText: '选择文件', //选择文件按钮文案
            multi: true, //是否允许多文件上传
            multiNum: 5, //多文件上传时允许的文件数
            showNote: true, //是否展示文件上传说明
            note: '提示：最多上传5个文件，支持格式为doc、pdf、jpg', //文件上传说明
            showPreview: true, //是否显示文件预览
            url: 'http://localhost/upload/UploadAction', //上传文件地址
            fileName: 'file', //文件filename配置参数
            formParam: {
                token: $.cookie('token_cookie') //不需要验证token时可以去掉
            }, //文件filename以外的配置参数，格式：{key1:value1,key2:value2}
            timeout: 30000, //请求超时时间
            successFunc: function(res) {
                console.log('成功回调', res);
                filename = res.name;
                alert("上传成功")
                console.log(filename);
            }, //上传成功回调函数
            errorFunc: function(res) {
                console.log('失败回调', res);
                alert("上传失败")
            }, //上传失败回调函数
            deleteFunc: function(res) {
                    console.log('删除回调', res);
                } //删除文件回调函数
        });
    </script>


    <!-- 提交表单 -->
    <script type="text/javascript">
        function submit() {
            var description = $("#description").val();
            var course = parseInt($("#course").val());
            var time = $("#time").val();
            $.ajax({
                //几个参数需要注意一下
                type: "POST", //方法类型
                dataType: "json", //预期服务器返回的数据类型
                traditional: true,
                url: "/courseware/addCourseware", //url
                data: {
                    "description": description,
                    "isOpen": $('input[type=radio][name=isOpen]:checked').val(),
                    "isDownload": $("input[name='isDownload']:checked").val(),
                    "cover": cover,
                    "cwnames": filename,
                    "duration": time,
                    "category": course,
                },
                success: function(result) {
                    console.log(result); //打印服务端返回的数据(调试用)
                    if (result.code == 200) {
                        alert("SUCCESS");
                    };
                    alert(result.message)
                },
                error: function() {
                    alert("异常！");
                }
            });
        }
    </script>


    <!-- 上传图片 -->
    <script type="text/javascript">
        function change(img) {
            var file = img.files[0];
            //获取一个指向该元素的地址
            var path = window.URL.createObjectURL(file);
            console.log(path);
            $("#upLoadImg").attr('src', path);
        }

        //js获取
        var inputTag = document.getElementById("bookImg");
        var img = inputTag.files[0];


        $("#fclick").click(function() {
            if ($("#bookImg").val() == '') {
                return;
            }

            //注意这里不能写错。。。
            var file = $("#bookImg")[0].files[0];
            console.log(file);
            var formData = new FormData();
            formData.append("upload", file);
            //对文件类型进行判断
            var index = file.name.lastIndexOf(".");
            var type = file.name.substring(index);
            console.info(type)
            if (type != ".jpg" && type != ".png") {
                alert("只能上传jpg和png格式的图片！！");
                return;
            }
            $.ajax({
                url: "http://localhost/upload/uploadImage",
                data: formData,
                type: "post",
                //这两个属性必须设置！！！！
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.code == 200) {
                        cover = data.name;
                        alert("添加成功！")
                    } else {
                        alert("添加失败！")
                    }
                }
            })
        });
    </script>

    <!-- 查询课程分类 -->
    <script type="text/javascript">
        $(function() {
            var data;
            $.ajax({
                url: "/courseCategory/all",
                type: "get",
                //这两个属性必须设置！！！！
                dataType: "json",
                success: function(result) {
                    if (result.code == 200) {
                        console.info(result.data);
                        data = result.data;
                        for (var i = 0; i < data.length; i++) {
                            var id = data[i].categoryId;
                            var name = data[i].categoryName;
                            addOption("course", id, name, false);
                        }
                    } else {
                        alert("失败！")
                    }
                }
            })

        });

        /**  
         * select元素动态添加option  
         *   
         * @param selectEleId select元素id  
         * @param width 要添加的option的value属性值  
         * @param height 要添加的option的innerHTML  
         * @param selected 是否选中  
         */
        function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
            var selectEle = document.getElementById(selectEleId);
            var optionObj = document.createElement("option");
            optionObj.value = optionValue;
            optionObj.innerHTML = optionInnerHTML;
            optionObj.selected = selected;
            optionObj.name = "course";
            selectEle.appendChild(optionObj);
        }
    </script>
</body>

</html>